<template>
    <div>
        <el-card class="pageCard">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>系统管理</el-breadcrumb-item>
                <el-breadcrumb-item>会员等级</el-breadcrumb-item>
            </el-breadcrumb>
            <div class="btnBox">
                <div>
                    <el-button size="small" icon="el-icon-plus" @click="addHandle('vip')">添加会员等级</el-button>
                    <el-button size="small" icon="el-icon-plus" @click="addHandle('rules')">添加充值信息</el-button>
                </div>
            </div>
            <div v-for="(item, index) in levelList" :key="index" class="vipCon">
                <div>{{ item.text }} 下一级需累计消耗积分{{ item.nextScore }}</div>
                <div class="vipRules">
                    <template v-if="item.rules.length != 0">
                        <el-card :class="rules.levelStatus == 1 ? 'box-card' : 'box-card noUse'"
                            v-for="(rules, rIndex) in item.rules" :key="rIndex"
                            :shadow="rules.levelStatus == 1 ? 'hover' : 'never'">
                            <div slot="header" class="clearfix">
                                <el-tag type="success" size="mini" v-if="rules.levelStatus == 1">使用中</el-tag>
                                <el-tag type="danger" size="mini" v-else>未使用</el-tag>
                                <el-button type="success" size="mini" @click="updateStatusUp(rules)">启用</el-button>
                                <el-button type="danger" size="mini" @click="updateStatusdown(rules)">禁用</el-button>

                            </div>
                            <div class="rulesList">
                                <div>充
                                    <span>{{ rules.levelMoney }}</span>元
                                </div>
                                <div>送
                                    <span>{{ rules.levelScore }}</span>积分
                                </div>
                                <div>送
                                    <span>{{ rules.levelDiamond }}</span>钻石
                                </div>
                                <div>推广返利
                                    <span>{{ rules.giveMoney }}</span>元
                                </div>
                            </div>
                        </el-card>
                    </template>
                    <el-empty v-else description="暂未设置充值规则"></el-empty>
                </div>
            </div>

        </el-card>


        <!-- 添加充值信息 -->
        <el-dialog title="添加充值信息" :visible.sync="addialogVisible" width="70%" :before-close="closeAddDialog">
            <el-form :model="form" label-width="100px" :rules="rules" ref="form">
                <el-form-item label="等级" prop="level">
                    <el-select v-model="form.level" placeholder="请选择会员等级" size="small">
                        <el-option :label="item.text" :value='item.level' v-for="(item, index) in levelList"
                            :key="index">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="充值信息">
                    <div>
                        <el-button size="small" @click="formatHandle('add')">添加规则</el-button>
                        <el-button size="small" @click="formatHandle('del')">删除规则</el-button>
                    </div>
                    <div v-for="(item, index) in form.list" :key="index" class="conBox">
                        <el-checkbox v-model="item.checked" style="margin-right: 16px"></el-checkbox>
                        <div>规则{{ index + 1 }}</div>
                        <div>
                            充值金额： <el-input v-model="item.levelMoney" size="small" type="number"
                                placeholder="请输入充值金额"></el-input>
                        </div>
                        <div>
                            赠送积分数： <el-input v-model="item.levelScore" size="small" type="number"
                                placeholder="请输入积分数量"></el-input>
                        </div>
                        <div>
                            赠送钻石数： <el-input v-model="item.levelDiamond" size="small" type="number"
                                placeholder="请输入钻石数量"></el-input>
                        </div>
                        <div>
                            推广公司返利： <el-input v-model="item.giveMoney" size="small" type="number"
                                placeholder="请输入推广返利"></el-input>
                        </div>
                    </div>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="closeAddDialog">取 消</el-button>
                <el-button type="primary" @click="submitAddDialog">确 定</el-button>
            </span>
        </el-dialog>


        <!-- 添加会员等级-->
        <el-dialog title="添加会员等级" :visible.sync="addDialog" width="70%" :before-close="closeDialog">
            <el-form :model="vipForm" label-width="110px" :rules="vipRules" ref="vipForm">
                <el-form-item label="等级" prop="level">
                    <el-input v-model="vipForm.level" size="small" style="width: 200px;" type="number"
                        placeholder="请输入会员等级"></el-input>
                </el-form-item>
                <el-form-item label="等级名称" prop="levelText">
                    <el-input v-model="vipForm.levelText" size="small" style="width: 200px;"
                        placeholder="请输入等级名称"></el-input>
                </el-form-item>
                <el-form-item label="累计消耗积分" prop="nextScore">
                    <el-input v-model="vipForm.nextScore" size="small" style="width: 200px;"
                        placeholder="请输入累计消耗积分"></el-input>
                </el-form-item>
                <el-form-item label="添加充值信息" prop="isAdd">
                    <el-radio-group v-model="vipForm.isAdd">
                        <el-radio label="1">是</el-radio>
                        <el-radio label="0">否</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="充值信息" v-if="vipForm.isAdd == 1">
                    <div>
                        <el-button size="small" @click="formatHandleVip('add')">添加规则</el-button>
                        <el-button size="small" @click="formatHandleVip('del')">删除规则</el-button>
                    </div>
                    <div v-for="(item, index) in vipForm.list" :key="index" class="conBox">
                        <el-checkbox v-model="item.checked" style="margin-right: 16px"></el-checkbox>
                        <div>规则{{ index + 1 }}</div>
                        <div>
                            充值金额： <el-input v-model="item.levelMoney" size="small" type="number"
                                placeholder="请输入充值金额"></el-input>
                        </div>
                        <div>
                            赠送积分数： <el-input v-model="item.levelScore" size="small" type="number"
                                placeholder="请输入积分数量"></el-input>
                        </div>
                        <div>
                            赠送钻石数： <el-input v-model="item.levelDiamond" size="small" type="number"
                                placeholder="请输入钻石数量"></el-input>
                        </div>
                        <div>
                            推广公司返利： <el-input v-model="item.giveMoney" size="small" type="number"
                                placeholder="请输入推广公司返利"></el-input>
                        </div>
                    </div>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="closeDialog">取 消</el-button>
                <el-button type="primary" @click="submitVip">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
import { getVipList, addVipLevel, updataStatusByVipId } from '../../network/vipLevel'
export default {
    data() {
        return {
            addialogVisible: false,
            companyId: sessionStorage.companyId,//弹窗
            // 添加会员信息
            form: {
                companyId: sessionStorage.companyId,
                level: '',
                type: 1,
                list: [
                    {
                        levelMoney: '',
                        levelScore: '',
                        levelDiamond: '',
                        giveMoney: '',

                    }
                ]
            },
            rules: {
                level: [
                    { required: true, message: '请选择会员等级', trigger: 'change' },
                ],
            },
            levelList: [
                {
                    level: 1,
                    text: 'VIP1',
                    checked: false,
                    rules: [
                        {
                            rulesId: 1,
                            money: 200,
                            points: 20,
                            diamond: 2,
                            resNum: 20,
                            status: 1
                        },
                        {
                            rulesId: 2,
                            money: 400,
                            points: 50,
                            diamond: 5,
                            resNum: 30,
                            status: 0
                        }
                    ]
                },
                {
                    level: 2,
                    text: 'VIP2',
                    checked: false,
                    rules: [
                        {
                            rulesId: 3,
                            money: 200,
                            points: 30,
                            diamond: 3,
                            status: 1,
                            resNum: 40,
                        },
                        {
                            rulesId: 4,
                            money: 400,
                            points: 60,
                            diamond: 6,
                            status: 0,
                            resNum: 50,
                        }
                    ]
                },
                {
                    level: 3,
                    text: 'VIP3',
                    checked: false,
                    rules: []

                },
            ],

            addDialog: false,
            vipForm: {
                companyId: sessionStorage.companyId,
                level: '',//会员的等级
                levelText: '',// 等级名称
                isAdd: '0', // 1 添加  0 不添加
                type: '0',
                nextScore: 0,
                list: [
                    {
                        levelMoney: '',
                        levelScore: '',
                        levelDiamond: '',
                        giveMoney: ''

                    }
                ]
            },
            vipRules: {
                level: [
                    { required: true, message: '请输入会员等级', trigger: 'blur' },
                ],
                levelText: [
                    { required: true, message: '请输入等级名称', trigger: 'blur' },
                ],
                nextScore: [
                    { required: true, message: '请输入消耗积分数', trigger: 'blur' },
                ],
            }

        };
    },
    methods: {
        detailHandle(obj) {
            console.log(obj);
        },

        submitAddDialog() {

            this.$refs.form.validate((valid) => {
                if (!valid) return

                var flag = false;
                this.form.list.forEach(item => {
                    for (var i in item) {
                        flag = item[i] == ''
                    }
                })
                addVipLevel(this.form).then(res => {
                    if (res.flag) {
                        this.getList();
                        this.closeAddDialog();
                    }
                })
                console.log(flag);
                if (flag) {
                    this.$message.warning('请将会员规则填写完整')
                    return
                }

                console.log(this.form);

            });
        },
        updateStatusUp(rules) {
            updataStatusByVipId({
                vipId: rules.vipId,
                type: 1
            }).then(res => {
                if (res.flag) {
                    this.getList()
                }
            })
        }
        , updateStatusdown(rules) {
            updataStatusByVipId({
                vipId: rules.vipId,
                type: 0
            }).then(res => {
                if (res.flag) {
                    this.getList()
                }
            })
        }
        ,


        // 添加规格  删除规格
        formatHandle(flag) {
            if (flag == 'add') {
                this.form.list.push({
                    levelMoney: '',
                    levelScore: '',
                    levelDiamond: '',
                    giveMoney: ''
                })
            } else {
                if (this.form.list.length == 1) {
                    this.$message.warning('最少添加一条规则')
                    return
                }
                var arr = this.form.list.filter(item => {
                    return item.checked
                })

                console.log(arr);

                if (arr.length == 0) {
                    this.$message.warning('请勾选要删除的规则')
                    return
                }
                this.form.list = this.form.list.filter(item => {
                    return !item.checked
                })

            }
        },
        formatHandleVip(flag) {
            if (flag == 'add') {
                this.vipForm.list.push({
                    levelMoney: '',
                    levelScore: '',
                    levelDiamond: ''
                })
            } else {
                if (this.vipForm.list.length == 1) {
                    this.$message.warning('最少添加一条规则')
                    return
                }
                var arr = this.vipForm.list.filter(item => {
                    return item.checked
                })

                console.log(arr);

                if (arr.length == 0) {
                    this.$message.warning('请勾选要删除的规则')
                    return
                }
                this.vipForm.list = this.vipForm.list.filter(item => {
                    return !item.checked
                })

            }
        },

        // 添加 VIP等级
        submitVip() {
            this.$refs.vipForm.validate((valid) => {
                if (!valid) return

                var flag = false;
                this.vipForm.list.forEach(item => {
                    for (var i in item) {
                        flag = item[i] == ''
                    }
                })
                addVipLevel(this.vipForm).then(res => {
                    if (res.flag) {
                        this.closeDialog()
                        this.getList();
                    } else {
                        this.closeDialog();
                        alert("该等级已存在");
                    }
                })
                console.log(flag);
                if (this.vipForm.isAdd == 1 && flag) {
                    this.$message.warning('请将会员规则填写完整')
                    return
                }
                console.log(this.vipForm);
            });
        },

        closeDialog() {
            this.addDialog = false
            this.$refs.vipForm.resetFields()
            this.vipForm.list = [
                {
                    levelMoney: '',
                    levelScore: '',
                    levelDiamond: ''

                }
            ]
        },
        // 关闭弹窗
        closeAddDialog() {
            this.addialogVisible = false
            this.$refs.form.resetFields()
            this.form.list = [
                {
                    levelMoney: '',
                    levelScore: '',
                    levelDiamond: ''
                }
            ]
        },
        handleSizeChange(val) {
            this.pageSize = val;
        },
        handleCurrentChange(val) {
            this.currentPage = val;
        },

        addHandle(flag) {
            if (flag == 'rules') {
                this.addialogVisible = true
            } else {
                this.addDialog = true
            }
        },
        getList() {
            getVipList({ companyId: this.companyId }).then(res => {
                if (res.flag) {
                    this.levelList = res.data
                }
            })
        }

    },
    created() {
        this.getList()
    },
    filters: {

    },
};
</script>

<style scoped>
.conBox {
    display: flex;
    align-items: center;
}

.conBox>div {
    margin-right: 16px;
}

.conBox>div>.el-input {
    width: 140px;
}

.vipCon {
    width: 100%;
}

.vipCon>div:first-child {
    padding: 24px 0;
    font-size: 18px;
    color: #333;
    font-weight: bold;
}

.vipRules {
    display: flex;
    flex-wrap: wrap;
}

.box-card {
    margin: 0 12px 12px 0;
    position: relative;
    width: 200px;
}

.rulesList>div {
    font-size: 16px;
    color: #333;
}

.rulesList>div:not(:last-child) {
    margin-bottom: 12px;
}

::v-deep(.el-card__header) {
    padding: 10px !important;
}

.clearfix {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.noUse {
    background: #eee !important;
}

.box-card .rulesList>div>span {
    width: 50px;
    display: inline-block;
    margin: 0 12px;
    font-size: 20px;
    color: rgb(236, 127, 64);
}

.noUse .rulesList>div>span {
    color: #333 !important;
}


.pageCard {
    height: 86vh;
    overflow-y: scroll;
}
</style>